<style>
	.aaa-enter-active,
	.aaa-leave-active {
		transition: opacity 2s;
	}
	.aaa-enter,
	.aaa-leave-to {
		opacity: 0;
	}
</style>

<h3>This is vue test page.</h3>
<div id="myVue">
	<p>======== 数据单向绑定 ========</p>
	<p>{{title}}</p>
	<p>{{number + 3}}</p>
	<p>{{user.userName}} ---- {{user.age}} ---- {{user.gender}}</p>
	<p v-html="htmlSting"></p>
	<p>用户名：<input type="text" :value="user.userName" /></p>
	<p>======== 数据双向绑定 ========</p>
	<p>用户名：<input type="text" v-model="user.userName" /></p>
	<p>年龄：<input type="text" v-model="user.age" /></p>
	<p>性别：<input type="text" v-model="user.gender" /></p>
	<p>======== 条件判断 ========</p>
	<p>
		<span v-if="show">if ---- 11111</span>
		<span v-else>if ---- 22222</span>
		<span v-show="show">show ---- 11111</span>
	</p>
	<p>======== 循环 ========</p>
	<ul>
		<li v-for="item in roles" :key="item.id" :id="item.id">{{item.roleName}}</li>
	</ul>
	<table>
		<tr>
			<td>ID</td>
			<td>RoleName</td>
		</tr>
		<tr v-for="item in roles" :key="item.id">
			<td>{{item.id}}</td>
			<td>{{item.roleName}}</td>
		</tr>
	</table>
	<select>
		<option v-for="(item, index) in roles" :key="item.id" :value="item.id">{{index}}_{{item.roleName}}</option>
	</select>
	<p>======== 事件绑定 ========</p>
	<p><input type="button" @click="number = number + 1" value="btn1" />{{number}}</p>
	<p><input type="button" @click="test1()" value="btn2" /></p>
	<p><input type="button" @click="test2($event)" id="btn3" price="22.2" value="btn3" /></p>
	<p>======== 监听器 ========</p>
	<p><input type="text" v-model="title" /> <span>{{titleError}}</span></p>
	<p><input type="text" v-model="user.userName" /> <span>{{userError}}</span></p>
	<p>======== 计算器 ========</p>
	<p>{{formatUserName}}</p>
	<p>======== 过滤器 ========</p>
	<p>{{title | filter1 | filter2}}</p>
	<p>======== 过滤器 ========</p>
	<p><button @click="show = !show">btn4</button></p>
	<transition name="aaa"><div v-show="show">bbbbbbbbbbbbbb</div></transition>
	<p>======== 过滤器 ========</p>
</div>
<script>
	// $(function () {
	// 	fun1();
	// 	test1();
	// });
	// function fun1() {
	// 	console.log("页面加载调用该方法，jquery 方式");
	// }

	Vue.filter("filter2", function (value) {
		return value.replace("w", "_");
	});
	var myVue = new Vue({
		el: "#myVue",
		data: {
			title: "fuck the world if you are rich, otherwise go fuck yourself.",
			titleError: "",
			htmlSting: "<span style='color:red;'>My name is hujiang.</span>",
			number: 1,
			show: false,
			user: {
				userName: "peiwenli",
				age: 18,
				gender: "famale",
			},
			userError: "",
			roles: [
				{ id: 1, roleName: "admin" },
				{ id: 2, roleName: "manager" },
				{ id: 3, roleName: "staff" },
			],
		},
		methods: {
			test1: function () {
				console.log("111111111111111111");
			},
			test2: function (event) {
				console.log(event.currentTarget.id);
				console.log(event.currentTarget.attributes.getNamedItem("price").value);
			},
		},
		watch: {
			title(newValue, oldValue) {
				this.titleError = newValue.length > 10 ? "标题太长" : "";
			},
			"user.userName"(newValue, oldValue) {
				this.userError = newValue.length > 10 ? "用户名太长" : "";
			},
		},
		computed: {
			formatUserName: function () {
				return this.user.userName[0].toUpperCase() + this.user.userName.substr(1);
			},
		},
		filters: {
			filter1: function (value) {
				return value.replace("fuck", "****");
			},
		},
		created() {
			window.test1 = this.test1;
		},
		mounted() {
			this.test1();
		},
	});
</script>
